<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-23 17:34:05
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-11-24 15:35:27
 * @FilePath: /nhw/src/views/Work/Snapshot/SnapshotRecord.vue
-->
<template>
  <Layout
    class="snapshot-record-container"
    title="随手拍纪录"
    border
    @click-right="show = true"
  >
    <template #right>
      <Icon name="filter-o" />
    </template>
    <PullRefresh v-model="isLoading" @refresh="onRefresh">
      <List
        v-show="orderList.length > 0"
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <Card
          v-for="item in orderList"
          :key="item.rpcNo"
          class="list-item"
          @click="toDetail(item.rpcNo, item.stateName)"
        >
          <CardTitle
            text="随手拍编号"
            :listId="item.rpcId"
            :state="+item.state"
            :stateText="item.stateName"
            :adorn="false"
          />
          <CardTwig
            :left="item.rpcName"
            style="color: #696d73"
            border
            strong
            adorn
          />
          <CardTwig left="联系人" :right="item.findUser" />
          <CardTwig left="联系人电话" :right="item.findMobile" />
          <CardTwig left="发现时间" :right="item.firstDtm" />
          <!-- <CardBtn /> -->
        </Card>
      </List>
      <Empty
        image="error"
        description="无数据"
        v-show="orderList.length <= 0"
      />
    </PullRefresh>
    <PopupCon
      phone
      contact
      date
      btnTitle="任务状态"
      :btnList="btnList"
      :show="show"
      @close="handleClose"
      @confirm="handleFilterList"
      @reset="handleReset"
    />
  </Layout>
</template>

<script>
import Layout from "components/Layout";
import { Icon, List, Empty, PullRefresh } from "vant";
import Card from "components/Card";
import CardTwig from "components/Card/CardTwig";
import CardTitle from "components/Card/CardTitle";
import PopupCon from "components/PopupCon";

import { problemClapList, getDictionary } from "@/api/work.js";
export default {
  name: "SnapshotRecord",

  components: {
    Layout,
    Card,
    CardTitle,
    CardTwig,
    PopupCon,
    Icon,
    List,
    Empty,
    PullRefresh,
  },

  data() {
    return {
      orgNo: "",
      show: false,
      loading: false, //下拉加载更多的loading状态
      finished: false,
      isLoading: false,
      pageNum: 1,
      filterCondition: {},
      orderList: [],
      btnList: [],
    };
  },
  created() {
    this.orgNo = window.localStorage.getItem("orgNo");
    getDictionary("RskmgProblemClap-state").then((res) => {
      if (res.state == 0) {
        this.btnList = res.param.data.map((item) => {
          return { ...item, active: false };
        });
      }
    });
    // state: '1',
    // startTime: "2020-10-09", //开始时间
    // endTime: "2021-10-10", //结束时间
    // findUser: "xiao", //发现人
    // findMobile: "16655021802", //发现人电话
    this.getList().then((res) => {
      this.orderList = res;
    });
  },

  mounted() {},

  methods: {
    //关闭筛选
    handleClose(lastBtnList) {
      this.show = false;
      if (lastBtnList) {
        this.btnList = lastBtnList;
      }
    },
    //重置
    handleReset() {
      this.finished = false;
      this.filterCondition = {};
      this.getList().then((res) => {
        this.orderList = res;
      });
      this.btnList.forEach((item) => {
        item.active = false;
      });
    },
    //条件过滤
    handleFilterList(data) {
      this.orderList = [];
      this.pageNum = 1;
      this.finished = false;

      let state = this.btnList
        .filter((item) => {
          return item.active;
        })
        .map((item) => item.id)
        .join(",");

      this.filterCondition = {
        startTime: data.startDate,
        endTime: data.endDate,
        findMobile: data.tel,
        findUser: data.contactName,
        state,
      };

      this.getList(this.filterCondition).then((res) => {
        this.orderList = res;
      });
    },
    //加载更多
    onLoad() {
      this.getList({ pageNum: ++this.pageNum, ...this.filterCondition }).then(
        (res) => {
          this.orderList.push(...res);
          this.loading = false;
        }
      );
    },
    //下拉刷新
    onRefresh() {
      this.pageNum = 1;
      this.finished = false;
      this.getList(this.filterCondition)
        .then((res) => {
          this.isLoading = false;
          this.orderList = res;
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    //跳转详情页
    toDetail(value, stateName) {
      this.$router.push({
        name: "SnapshotDetails",
        query: { rpcNo: value, stateName },
      });
    },
    //获取列表数据
    async getList(params = {}) {
      params = Object.assign(
        {},
        {
          point: "",
          pageNum: 1, //页码
          pageSize: 10, //数量
          orgNo: this.orgNo,
        },
        params
      );
      const res = await problemClapList(params);
      if (res.param.sumPage == this.pageNum || res.param.data.length <= 0) {
        this.finished = true;
      }
      return res.param.data;
    },
  },
};
</script>

<style lang="less" scoped>
.snapshot-record-container {
  .van-list {
    background: #f7f7f9;
    min-height: 70vh;
    .list-item {
      margin-bottom: 20px;
      background: #fff;
    }
  }

  .van-pull-refresh {
    min-height: 100%;
  }
}
</style>